<template>
  <div>
    <h2>Home组件</h2>
    <!-- 声明式路由导航-使用router-link组件,支持用户在具有路由功能的应用中(点击)导航 -->
  <!-- <router-link to="/Home/News" tag="button">新闻</router-link>
  <router-link to="/Home/Music" tag="button">音乐</router-link>
  <router-link to="/Home/Game" tag="button">游戏</router-link> -->

  <!-- replace属性让路由跳转的过程中替换之前的历史记录 -->
  <!-- active-class:设置链接激活时使用的css类名 -->

  <router-link :to="{path:'/Home/News',}" tag="button" replace active-class="active">新闻</router-link>
  <router-link :to="{ path:'/Home/Music',}" tag="button" replace active-class="active">音乐</router-link>
  <router-link :to="{path:'/Home/Game',}" tag="button" replace active-class="active">游戏</router-link>
  <!-- home中的二级路由出口 -->
  <router-view></router-view>
  </div>
</template>

<script>
export default {
name:"Home"
}
</script>

<style scoped>
.active{
  background: yellow;
}
</style>